<!-- saved from url=(0022)http://internet.e-mail -->
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
--> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
    <title> 
      Google Visualization API Sample
    </title> 
    
    <script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code
function ajaxFunction(){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
	// Create a function that will receive data sent from the server
	ajaxRequest.onreadystatechange = function(){
		//if(ajaxRequest.readyState == 4){
            //parse JSON delivered from server

        drawVisualization([
          ['9', 14],
          ['8', 47],
          ['7', 80],
          ['6', 55],
          ['5', 16],
          ['4', 90],
          ['3', 29],
          ['2', 23],
          ['1', 58],
          ['Now!', 48]
        ],10);
	//	}
	}
}
 
//-->
</script> 
    
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script type="text/javascript"> 
      google.load('visualization', '1', {packages: ['imagechart']});
    </script> 
    <script type="text/javascript"> 
      // This function applies color formatting to a bar chart,
      // by calculating the color of each bar based on the data.
      function drawVisualization(studentStatus, numOfCols) {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string');
        data.addColumn('number');
 
        data.addRows([
          ['9', 14],
          ['8', 47],
          ['7', 80],
          ['6', 55],
          ['5', 16],
          ['4', 90],
          ['3', 29],
          ['2', 23],
          ['1', 58],
          ['Now!', 48]
        ]);
        
        var red = 'ff0000';
        var green = '00ff00';
        var yellow = 'ffff00';
        
        // Loop over the data table to create the color specification. 
        var colors = [];
        for (var i = 0; i < data.getNumberOfRows(); i++) {
          var value = data.getValue(i, 1);
          var color = value < 22 ? green : (value < 50 ? yellow : red);
          colors.push(color);
        }
        colors = colors.join('|');
      
        var options = {cht: 'bvs', chco: colors, max: 100};
      
        // Create and draw the visualization.
        new google.visualization.ImageChart(document.getElementById('visualization')).
          draw(data, options);  
      }

      google.setOnLoadCallback(drawVisualization);
    </script> 
	
<script type="text/javascript">
setInterval( "ajaxFunction()", 1*60*1000 );
//--></script> 
  </head> 
  <body style="font-family: Arial;border: 0 none;"> 
    <div id="visualization" style="width: 300px; height: 300px;"></div> 
  </body> 
</html>